﻿<!DOCTYPE HTML>
<html lang="zh">

	<head>
		<title>一款通用的js分享插件</title>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<meta http-equiv="x-ua-compatible" content="ie=emulateie7" />
		<meta name="author" content="netease" />
		<meta name="version" content="1.0" />
		<meta name="keywords" content="JS,插件,分享" />
		<meta name="description" content="" />
		<script type="text/javascript">
			(function(window, document) {

				document.uniqueID != document.uniqueID && !!location.hash && (location.hash = location.hash);
				window.focus();
			})(this, document);
		</script>
		<link href="style/css/pt_lib_macro.css" type="text/css" rel="stylesheet" />
		<style>
			html,
			body {
				height: auto;
				overflow: hidden;
				background: #EDEDEF;
			}
			
			.c-bd {
				width: 700px;
				margin: 115px auto;
				background: #fff;
				border: 1px solid #c0c0c0;
			}
			
			.c-bdc {
				padding: 90px 0 90px 70px;
			}
			
			.c-bdc .w-wb1 {
				margin: 35px 0 0;
			}
			
			.w-wb1 .wb10 {
				overflow: hidden;
				display: block;
				width: 38px;
				height: 35px;
				text-indent: -9999px;
				background: url(style/images/img/tieba24.png) -43px 0 no-repeat;
			}
			
			.w-wb1 .wb10:hover {
				background-position: 1px 0;
			}
			/* 微信分享弹层样式 */
			
			.towdimcodelayer {
				position: absolute;
				left: -50px;
				top: -215px;
				z-index: 10000;
				margin-top: 0;
				opacity: 0;
				filter: alpha(opacity=0);
			}
			
			.js-transition {
				transition: margin-top .15s ease, opacity .12s linear;
				-webkit-transition: margin-top .15s ease, opacity .12s linear;
				-moz-transition: margin-top .18s ease, opacity .15s linear;
				-ms-transition: margin-top .15s ease, opacity .12s linear;
				-o-transition: margin-top .15s ease, opacity .12s linear;
			}
			
			.towdimcodelayer .arrow {
				position: absolute;
				width: 0;
				height: 0;
				border-width: 8px;
				border-style: solid;
				_display: none;
			}
			
			.towdimcodelayer .js-arrow-up {
				left: 72px;
				top: -15px;
				border-color: transparent transparent #191919 transparent;
			}
			
			.towdimcodelayer .js-arrow-down {
				left: 72px;
				bottom: -15px;
				border-color: #191919 transparent transparent transparent;
			}
			
			.towdimcodelayer .layerbd {
				width: 100px;
				height: 150px;
				padding: 30px 30px 0 30px;
				background: #191919;
				box-shadow: 0 1px 3px #000;
				-webkit-box-shadow: 0 1px 3px #000;
				-moz-box-shadow: 0 1px 3px #000;
				-o-box-shadow: 0 1px 3px #000;
			}
			
			.towdimcodelayer .codebg {
				width: 75px;
				height: 75px;
				padding: 13px 12px 12px 13px;
				background: #fff;
			}
			
			.towdimcodelayer .codebg img {
				width: 75px;
				height: 75px;
			}
			
			.towdimcodelayer .codettl {
				height: 22px;
				line-height: 22px;
				margin-top: 5px;
				color: #888;
				font-size: 12px;
			}
			
			.js-show-up {
				margin-top: 15px;
				opacity: 1;
				filter: alpha(opacity=100);
			}
			
			.js-show-down {
				margin-top: -15px;
				opacity: 1;
				filter: alpha(opacity=100);
			}
		</style>
	</head>

	<body>

		<div class="c-bd">
			<div class="c-bdc">
				<div class="c-mn">
					<h2 class="f-fs4 f-fw0 f-tal">将该日志分享到：</h2>
					<ul class="w-wb1">
						<!--微信-->
						<li class="f-pr">
							<a href="javascript:void(0)" class="wb11" onmouseover="onMouseoverXCode()" onmouseout="onMouseoutXCode()">分享到微信</a>
							<div class="towdimcodelayer js-transition" id="layerWxcode">
								<div class="arrow js-arrow-down"></div>
								<div class="layerbd">
									<div class="codebg"><img class="xtag" src="http://www.lofter.com/genBitmaxImage?url=http://www.jq-school.com/?act=qbwzywxfx_20141226_01"></div>
									<div class="codettl">打开微信扫一扫</div>
								</div>
							</div>
						</li>
						<!--新浪-->
						<li>
							<a href="#" onclick="dolog('sina', function(){window.open('http://v.t.sina.com.cn/share/share.php?title=' + encodeURIComponent('jqueryschool是国内最大的jquery原创分享社区，专门分享原创jquery插件、jquery工具、jquery特效、html5、css3、jquery教程的网站，分享原创设计，把开发代码封装成插件，最短时间掌握jquery知识。') + '&pic=' + encodeURIComponent('http://www.jq-school.com/images/logo.gif') + '&sourceUrl=http%3A%2F%2Fwww.lofter.com&appkey=895033136', '_parent', ['toolbar=0,status=0,resizable=1,width=630,height=500,left=',(screen.width-630)/2,',top=',(screen.height-500)/2].join(''));return false;});" class="wb1" title="分享到新浪微博">分享到新浪微博</a>
						</li>
						<!--百度贴吧-->
						<li>
							<a href="#" onclick="dolog('baidutieba', function(){window.open('http://tieba.baidu.com/f/commit/share/openShareApi?title=' + encodeURIComponent('jqueryschool是国内最大的jquery原创分享社区') + '&url=' + encodeURIComponent('http://www.jq-school.com/') + '&pic=' + encodeURIComponent('http://www.jq-school.com/images/logo.gif'), '_parent', ['toolbar=0,status=0,resizable=1,width=600,height=520,left=',(screen.width-600)/2,',top=',(screen.height-520)/2].join(''));return false;});" class="wb10" title="分享到百度贴吧">分享到百度贴吧</a>
						</li>
						<!--豆瓣-->
						<li>
							<a href="#" onclick="dolog('douban', function(){window.open('http://shuo.douban.com/!service/share?href=' + encodeURIComponent('http://www.jq-school.com/') + '&name=' + encodeURIComponent('jqueryschool是国内最大的jquery原创分享社区，专门分享原创jquery插件、jquery工具、jquery特效、html5、css3、jquery教程的网站，分享原创设计，把开发代码封装成插件，最短时间掌握jquery知识。') + '&image=' + encodeURIComponent('http://www.jq-school.com/images/logo.gif'), '_parent', ['toolbar=0,status=0,resizable=1,width=640,height=340,left=',(screen.width-640)/2,',top=',(screen.height-340)/2].join(''));return false;});" class="wb3" title="分享到豆瓣">分享到豆瓣</a>
						</li>
						<!--QQ-->
						<li>
							<a href="#" onclick="dolog('qq', function(){window.open('http://v.t.qq.com/share/share.php?c=share&a=index&appkey=5bd32d6f1dff4725ba40338b233ff155&title=' + encodeURIComponent('jqueryschool是国内最大的jquery原创分享社区，专门分享原创jquery插件、jquery工具、jquery特效、html5、css3、jquery教程的网站，分享原创设计，把开发代码封装成插件，最短时间掌握jquery知识。') + '&pic=' + encodeURIComponent('http://www.jq-school.com/images/logo.gif'), '_parent', ['toolbar=0,status=0,resizable=1,width=630,height=500,left=',(screen.width-630)/2,',top=',(screen.height-500)/2].join(''));return false;});" class="wb4" title="分享到腾讯微博">分享到腾讯微博</a>
						</li>
						<!--QQ空间-->
						<li>
							<a href="#" onclick="dolog('qzone', function(){window.open('http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?title=' + encodeURIComponent('jqueryschool是国内最大的jquery原创分享社区，专门分享原创jquery插件、jquery工具、jquery特效、html5、css3、jquery教程的网站，分享原创设计，把开发代码封装成插件，最短时间掌握jquery知识。') + '&url=' + encodeURIComponent('http://www.jq-school.com/'), '_parent', ['toolbar=0,status=0,resizable=1,width=600,height=520,left=',(screen.width-600)/2,',top=',(screen.height-520)/2].join(''));return false;});" class="wb5" title="分享到QQ空间">分享到QQ空间</a>
						</li>
						<!--人人-->
						<li>
							<a href="#" onclick="dolog('renren', function(){window.open('http://share.renren.com/share/buttonshare.do?link=' + encodeURIComponent('http://www.jq-school.com/') + '&title=' + encodeURIComponent('jqueryschool是国内最大的jquery原创分享社区，专门分享原创jquery插件、jquery工具、jquery特效、html5、css3、jquery教程的网站，分享原创设计，把开发代码封装成插件，最短时间掌握jquery知识。'), '_parent', ['toolbar=0,status=0,resizable=1,width=630,height=500,left=',(screen.width-630)/2,',top=',(screen.height-500)/2].join(''));return false;});" class="wb6" title="分享到人人网">分享到人人网</a>
						</li>
						<!--开心网-->
						<li>
							<a href="#" onclick="dolog('kaixin', function(){window.open('http://www.kaixin001.com/repaste/share.php?rtitle=' + encodeURIComponent('jqueryschool是国内最大的jquery原创分享社区，专门分享原创jquery插件、jquery工具、jquery特效、html5、css3、jquery教程的网站，分享原创设计，把开发代码封装成插件，最短时间掌握jquery知识。'), '_parent', ['toolbar=0,status=0,resizable=1,width=670,height=360,left=',(screen.width-670)/2,',top=',(screen.height-360)/2].join(''));return false;});" class="wb7" title="分享到开心网">分享到开心网</a>
						</li>
						<!--Facebook-->
						<li>
							<a href="#" onclick="dolog('facebook', function(){window.open('http://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent('http://www.jq-school.com/') + '&t=' + encodeURIComponent('jqueryschool是国内最大的jquery原创分享社区，专门分享原创jquery插件、jquery工具、jquery特效、html5、css3、jquery教程的网站，分享原创设计，把开发代码封装成插件，最短时间掌握jquery知识。'), '_parent', ['toolbar=0,status=0,resizable=1,width=660,height=280,left=',(screen.width-660)/2,',top=',(screen.height-280)/2].join(''));return false;});" class="wb8" title="分享到Facebook">分享到Facebook</a>
						</li>
						<!--twitter-->
						<li>
							<a href="#" onclick="dolog('twitter', function(){window.open('http://twitter.com/intent/tweet?url=' + encodeURIComponent('http://www.jq-school.com/') + '&text=' + encodeURIComponent('《mysql Java jsp\\/servlet Tomcat完美解决乱码问题详细教程》 今天被乱码问题搞了好久= = 心累 然后说一下解决方案 1.mysql的 1)windows http:\\/\\/www.2cto.com\\/dat...  （分享自www.jq-school.com）'), '_parent', ['toolbar=0,status=0,resizable=1,width=660,height=280,left=',(screen.width-660)/2,',top=',(screen.height-280)/2].join(''));return false;});" class="wb9" title="分享到Twitter">分享到Twitter</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<script>
			function dolog(_info, _callback) {
				var img = new Image();
				img.onload = img.onerror = _callback;
				img.src = 'http://www.jq-school.com/images/logo.gif';
			}

			var layerWxcode = document.getElementById('layerWxcode');

			function onMouseoverXCode() {
				layerWxcode.className = 'towdimcodelayer js-transition js-show-up';
			}

			function onMouseoutXCode() {
				layerWxcode.className = 'towdimcodelayer js-transition';
			}
		</script>
	</body>

</html>